<template>
<div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
	<div class="row">
		<div class="ibox float-e-margins">
			<div class="ibox-content col-md-12">
				<form id="drinkingwaterSourceForm" method="post" class="form m-t"  @submit.prevent="save()" accept-charset="UTF-8" >
					<input type="hidden" name="id" v-model="item.id" />
					<input type="hidden" name="token" v-model="item.token" />
					<input type="hidden" name="newFlag" v-model="newFlag" />
					<div class="clearfix "></div>
					<div class="col-md-6 b-r">

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">饮用水源地编码：</label>
                            <div class="col-md-12">
                                <input id="bean-sourceCode" name="sourceCode" v-model="item.sourceCode" class="form-control" type="text"  placeholder="请输入饮用水源地编码"  required="" aria-required="true"  aria-describedby="bean-sourceCode-error"  maxlength="50"   aria-invalid="true">
                                <span id="bean-sourceCode-error" class="help-block m-b-none" for="bean-sourceCode"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">饮用水源地名称：</label>
                            <div class="col-md-12">
                                <input id="bean-sourceName" name="sourceName" v-model="item.sourceName" class="form-control" type="text"  placeholder="请输入饮用水源地名称"  required="" aria-required="true"  aria-describedby="bean-sourceName-error"  maxlength="50"   aria-invalid="true">
                                <span id="bean-sourceName-error" class="help-block m-b-none" for="bean-sourceName"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">所在经度：<a href="javascript:;" @click="getCoordinate()" class="label label-success"><i class="fa fa-coordinate"></i>坐标拾取</a></label>
                            <div class="col-md-12">
                                <input id="bean-longitude" name="longitude" v-model="item.longitude" class="form-control" type="number"  placeholder="请输入所在经度"  required="" aria-required="true"  aria-describedby="bean-longitude-error"   aria-invalid="true">
                                <span id="bean-longitude-error" class="help-block m-b-none" for="bean-longitude"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">所在纬度：</label>
                            <div class="col-md-12">
                                <input id="bean-latitude" name="latitude" v-model="item.latitude" class="form-control" type="number"  placeholder="请输入所在纬度"  required="" aria-required="true"  aria-describedby="bean-latitude-error"   aria-invalid="true">
                                <span id="bean-latitude-error" class="help-block m-b-none" for="bean-latitude"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">年供水量(万m³)：</label>
                            <div class="col-md-12">
                                <input id="bean-annualWaterSupply" name="annualWaterSupply" v-model="item.annualWaterSupply" class="form-control" type="number"  placeholder="请输入年供水量(万m³)"  required="" aria-required="true"  aria-describedby="bean-annualWaterSupply-error"   aria-invalid="true">
                                <span id="bean-annualWaterSupply-error" class="help-block m-b-none" for="bean-annualWaterSupply"></span>
                            </div>
                        </div>

					</div>
					<div class="col-md-6">

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">水质类别：</label>
                            <div class="col-md-12">
                              <select data-placeholder="选择水质类别" id="bean-waterGrades" name="waterGrades" class="form-control"   aria-describedby="bean-waterGrades-error"  maxlength="50"   aria-invalid="true">
                                <option value="">--请选择水质类别--</option>
                                <option value="I类" :selected="'I类' === item.waterGrades">I类</option>
                                <option value="II类" :selected="'II类' === item.waterGrades">II类</option>
                                <option value="III类" :selected="'III类' === item.waterGrades">III类</option>
                                <option value="IV类" :selected="'IV类' === item.waterGrades">IV类</option>
                                <option value="V类" :selected="'V类' === item.waterGrades">V类</option>
                                <option value="轻度黑臭" :selected="'轻度黑臭' === item.waterGrades">轻度黑臭</option>
                                <option value="重度黑臭" :selected="'重度黑臭' === item.waterGrades">重度黑臭</option>
                              </select>
                                <!--<input id="bean-waterGrades" name="waterGrades" v-model="item.waterGrades" class="form-control" type="text"  placeholder="请输入水质类别包括：I类、II类、III类、IV类、V类、轻度黑臭、重度黑臭"  aria-describedby="bean-waterGrades-error"  maxlength="50"   aria-invalid="true">-->
                                <span id="bean-waterGrades-error" class="help-block m-b-none" for="bean-waterGrades"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">行政区划：</label>
                            <div class="col-md-12">
                                <!--<input id="bean-regionId" name="regionId" v-model="item.regionId" class="form-control" type="text"  placeholder="请输入行政区划"  aria-describedby="bean-regionId-error"  maxlength="50"   aria-invalid="true">-->
                              <region-select :region-ids="item.regionId"/>
                              <span id="bean-regionId-error" class="help-block m-b-none" for="bean-regionId"></span>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <label class="col-md-8 control-label">备注：</label>
                            <div class="col-md-12">
                                <input id="bean-memo" name="memo" v-model="item.memo" class="form-control" type="text"  placeholder="请输入备注"  aria-describedby="bean-memo-error"  maxlength="255"   aria-invalid="true">
                                <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                            </div>
                        </div>

					</div>

                  <div class="clearfix "></div>
                  <div class="col-12 text-center" style="height: 50px;">
                    <div>
                      <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
                    </div>
                  </div>
                </form>
			</div>
		</div>
	</div>
</div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'

  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
  import regionSelect from './regionSelect'

  export default {
        data() {
          return {
            item: {},
            newFlag: 0,
            uuidToken: ''
          }
        },
    components: {
      regionSelect
    },
        mounted() {
          let that = window.$vueApp = this;
          document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
          $('#drinkingwaterSourceForm').validate();
          that.staff.init(function () {
            that.newFlag = sessionStorage.getItem(site.drinkingwaterSource.info);
              if (that.newFlag) that.uuidToken = apiUtil.guid();
              if (apiUtil.existSessionKey(site.drinkingwaterSource.info)) {
                that.info();
              }
          });
        },
        methods: {
            info() {
              let that = window.$vueApp = this;
                axios.get(site.drinkingwaterSource.info + sessionStorage.getItem(site.drinkingwaterSource.info), {}).then(function (response) {
                     const result = response.data;
                    if (result.code === 0) {
                        that.item = result.data;
                    } else {
                        alert(result.message);
                    }
                });
            },
            save() {
              let that = window.$vueApp = this;
                if ($('#drinkingwaterSourceForm').valid()) {
                     axios.post(site.drinkingwaterSource.save, $('#drinkingwaterSourceForm').serialize(),
                     axiosContentType.xWwwFormUrlencoded).then(function (response) {
                        const result = response.data;
                        // console.info("获取数据.." + JSON.stringify(result));
                        if (result.code === 0) {
                            parent.$vueApp.page();
                            alert('保存成功!');
                            that.lbox.closeMyBoxLayer()
                        } else {
                            alert(result.message);
                        }
                    });
                };
            },
          getCoordinate() { // 坐标拾取页面
            let that = window.$vueApp = this;
            that.lbox.openMyBoxLayer('经纬度坐标拾取', site.map.mapll);
          },
          setMapSite(longitude, latitude, address) { // 坐标拾取回调
            let that = window.$vueApp = this;
            $('#bean-longitude').val(longitude);
            $('#bean-latitude').val(latitude);
            that.item.longitude = longitude;
            that.item.latitude = latitude;
          }
        }
    }
</script>

